<template>
  <div class="Classification">
    <div class="main">
      <div style="display:flex;width:1100px;align-items: center;">
        <div style="width:100px;height:30px;border:1px solid #3f3f3f; border-radius: 25px;display: flex;justify-content: center;align-items: center;opacity: 0.7;cursor: pointer;" @click="getopen">
          <span style="font-size: 14px;">{{title}}</span><i class="el-icon-arrow-right" style="font-size:14px;"></i>
        </div>
        <div style="flex: 1;" class="rmgdfl">
          <div style="float: right;">
            <span :class="item.name==title?'b':''" style="margin-right: 10px;" v-for="item in tags" :key="item.id" @click="getPopular(item.name)">{{item.name}}</span>
          </div>
        </div>
      </div>

      <el-card class="box-card" style="width:700px; z-index: 99999;position: relative;" v-if="show==true">
        <div style="margin-bottom: 10px;" :class="title=='全部歌单'?'p':''" @click="getAllsonglists">全部歌单</div>
        <div style="border-bottom: 1px solid red;width: 120%;margin-left: -20px;">
        </div>
        <div class="categories" v-for="(item,index) in categories" :key="index">
          <i class="iconfont icon-diqiu" style="font-size:25px;opacity: 0.4;"></i>
          <p style="width:100px;opacity: 0.4;font-size: 13px;padding-top: 3px;padding-left: 5px;">{{item}}</p>
          <div class="spanlist">
            <span style="margin-bottom:30px; font-size: 13px;" v-for="(item1,index1) in sub" :key="index1" v-show="index==item1.category" @click="getclassify(item1.name)" :class="title==item1.name?'p':''">{{item1.name}}</span>
          </div>
        </div>
      </el-card>
      <div style="margin-top: 10px;display: flex;display: grid;grid-template-columns: auto auto auto auto auto;width: 1125px; overflow: hidden;">
        <div class="imglist" v-for="(item2,index) in playlists" :key="item2.id">
          <img :src="item2.coverImgUrl" alt="#" style="width:200px;height:200px;border-radius: 5px;" @click="getplaylistid(item2.id,item2.creator.avatarUrl)">
          <p style="width:200px; word-wrap:break-word;">{{item2.name}}</p>
          <div style="position:relative;left: 5px;top: -65px;z-index: 99;color: #fff;font-size: 13px;">
            <i class="iconfont icon-renwu-ren" style="font-size: 13px;"></i>
            <span style="margin-left:3px;">{{item2.creator.nickname}}</span>
          </div>
          <div style="position:relative;left:130px;top:-260px;color:#fff;">
            <i class="iconfont icon-24gl-play" style="font-size:13px;"></i>
            <span style="font-size:13px;margin-left: 2px;" v-for="(item3,index1) in Playquantitylist" :key="index1" v-show="index==index1">{{item3}}万</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus'
export default {
  name: 'Classification',
  data() {
    return {
      show: false,
      arr: [],
      title: '全部歌单',
      Playquantity: [],
      Playquantitylist: [],
      quanbuged: '全部歌单'
    }
  },
  computed: {
    ...mapState({
      //从vuex获取网友精选歌单
      playlists: state => state.playlist.playlists,
      //从vuex中获取精品歌单分类
      categories: state => state.playlist.SonglistClassification.categories,
      sub: state => state.playlist.SonglistClassification.sub,
      //获取热门分类
      tags: state => state.playlist.tags
    })
  },
  methods: {
    //点击全部歌单控制面板的显示与隐藏
    getopen() {
      if (this.show == false) {
        this.$store.dispatch('getSonglistClassification')
      }
      this.show = !this.show
    },
    //点击分类面板
    getclassify(e) {
      //赋值
      this.title = e
      //关闭面板
      this.show = false
      this.$store.dispatch('getSelectednetizensList', { cat: e })
      this.$store.dispatch('getBoutiquesongList', { cat: e })
      Bus.$emit('Entertheboutique', e)
    },
    //点击热门歌单分类
    getPopular(e) {
      this.title = e
      this.$store.dispatch('getSelectednetizensList', { cat: e })
      this.$store.dispatch('getBoutiquesongList', { cat: e })
      Bus.$emit('Entertheboutique', e)
    },
    //点击全部歌单
    getAllsonglists() {
      this.title = '全部歌单'
      this.show = false
      this.$store.dispatch('getSelectednetizensList', { cat: '全部' })
      this.$store.dispatch('getBoutiquesongList', { cat: '全部' })
    },
    //获取歌单的id
    getplaylistid(e, v) {
      this.$router.push({ path: '/home/Songlistdetails', query: { id: e, imgurl: v } })
    }
  },
  mounted() {
    this.$store.dispatch('getSelectednetizensList', { cat: this.quanbuged })
    this.$store.dispatch('getPopularsongList')
    //计算从接口获取的数据
    setTimeout(() => {
      let a = []
      let b = this.playlists
      a = [].concat(
        ...b.map(val => {
          return val.playCount
        })
      )
      this.Playquantity = a
      setTimeout(() => {
        for (let i = 0; i < 51; i++) {
          if (this.Playquantity[i].toString().length < 7) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 1))
          } else if (this.Playquantity[i].toString().length < 7) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 2))
          } else if (this.Playquantity[i].toString().length < 8) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 3))
          } else if (this.Playquantity[i].toString().length < 9) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 4))
          } else if (this.Playquantity[i].toString().length < 10) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 1))
          } else if (this.Playquantity[i].toString().length < 11) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 2))
          } else if (this.Playquantity[i].toString().length < 12) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 5))
          }
        }
      }, 300)
    }, 500)
  },
  watch: {
    playlists: {
      handler(v, o) {}
    }
  }
}
</script>

<style lang="less" scoped>
.Classification {
  margin-top: -135px;
  .main {
    .rmgdfl {
      span {
        font-size: 12px;
        opacity: 0.5;
      }
      span:hover {
        color: red;
        cursor: pointer;
      }
      .b {
        color: red;
        font-size: 14px;
      }
    }
    .p {
      width: 90px;
      height: 30px;
      background-color: rgb(248, 220, 220);
      justify-content: center;
      display: flex;
      align-items: center;
      color: red;
      border-radius: 25px;
    }
    .imglist {
      img:hover {
        cursor: pointer;
      }
      p:hover {
        color: red;
        cursor: pointer;
      }
    }
    .categories {
      display: flex;

      padding-top: 20px;
      .spanlist {
        width: 1000px;
        display: flex;
        display: grid;
        margin-left: 50px;
        grid-template-columns: auto auto auto auto auto auto;
        span {
          cursor: pointer;
        }
        span:hover {
          color: red;
        }
      }
    }
  }
}
</style>